<template>
	<view class="icon-recommend">
		<view class="re_item" @click="toDifferPages(index)" v-for="(item, index) in iconNav" :key="index">
			<view class="iconfont" :class="item.icon"></view>
			<text class="txt">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
	import { loginStatus } from '../../../api/index.js'
 	export default {
		data() {
			return {
				userId: '',
				iconNav: [
					{icon: "icon-tuijian", text: "每日推荐"},
					{icon: "icon-gedan", text: "歌单"},
					{icon: "icon-paixingbang", text: "排行榜"},
					{icon: "icon-diantai", text: "电台"},
				]
			}
		},
		created() {
			this.loginStatusFun()
		},
		methods: {
			// 判断用户是否已登录
			async loginStatusFun () {
				// 先获取cokie
				const cookies = uni.getStorageSync('cookies')
				const {data: {data: res}} = await loginStatus({cookie: cookies})
				this.userId = res.profile?.userId
			},
			// 检查是否已登录
			checkLogin(userId) {
				if (!userId) {
					// 未登录,自动跳转到登录页
					uni.showToast({
						title: '请先登录!',
						mask: true,
						duration: 2000,
						icon: 'none'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 2000)
					return
				}
			},
			toDifferPages(type) {
				if (type === 0) {
					console.log('每日推荐')
				} else if (type === 1) {
					uni.navigateTo({
						url: '/pages/type-playList/type-playList'
					})
				} else if (type === 2) {
					// 跳转前前判断是否已登录
					this.checkLogin(this.userId)
					if (this.userId) uni.navigateTo({
						url: '/pages/chart_playlist/chart_playlist'
					})
				} else if (type === 3) {
					console.log('电台')
				}
			}
		}
	}
</script>

<style lang="scss">
	.icon-recommend {
		display: flex;
		padding: 30rpx 0;
		text-align: center;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid rgba(124, 121, 12, 0.3);
		.re_item {
			flex: 1;
			font-size: 30rpx;
			view {
				margin: 0 auto;
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				background-color: $uni-color-theme;
				border-radius: 50%;
				font-size: 40rpx;
				color: white;
				margin-bottom: 5rpx;
			}
		}
	}
</style>
